import React, { useEffect, useState, useMemo } from "react";
import { Layout, Menu } from "antd";
// import ModelLearning from "./../assets/model_manage/model_learning";
// import ModelManage from "../assets/model_manage/model_manage";
import routesConfig from './route_config';
import menuConfig from './menu_config';
import {
  Switch,
  Route,
  useHistory,
  // Link
} from "react-router-dom";
import "./index.less";

const { Header, Footer, Sider, Content } = Layout;
const { SubMenu } = Menu;

interface MenuInfo {
  key: string;
  keyPath: string[];
  item: React.ReactInstance;
  domEvent: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
}
const RoutesComponent = () => {
  const [selectedKeys, setSelectedKeys] = useState<string[] | undefined>(undefined);
  let history = useHistory();
  const clickMenu = ({ key } : MenuInfo) => {
    setSelectedKeys([key]);
    history.push(`/${key}`);
  };
  useEffect(() => {
    const pathname = window.location.pathname;
    if(pathname === '/') {
      setSelectedKeys([menuConfig[0].key]);
      history.push(`/${menuConfig[0].key}`);
    } else {
      setSelectedKeys([pathname.slice(1, pathname.length)])
    }
  }, [])
  
  const renderRoute = useMemo(() => {
    const routes = routesConfig.map(route => {
        return <Route key={route.path} exact path={route.path} component={route.component} />
    });
    return routes;
  }, []);
  return (
    <Layout className="ai-main-center">
      <Header>
      <img src={require('@/static/title.png')} />
      </Header>
      <Layout >
        <Sider theme='light'>
          <Menu
            onSelect={clickMenu}
            theme="light"
            selectedKeys={selectedKeys}
          >
            {
              menuConfig.map(menu => {
                return <Menu.Item icon={menu.icon} key={menu.key}>{menu.name}</Menu.Item>
              })
            }
          </Menu>
        </Sider>
        <Content style={{overflow: 'hidden'}}>
          <div style={{padding: "24px 28px 24px 36px"}}>
          <Switch>
            {renderRoute}
          </Switch>
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default RoutesComponent;
